//回到顶部
$(window).on("scroll", function () {
    let scrollTop = $(window).scrollTop();
    if (scrollTop > 100) {
        $(".backTop").show()
    } else {
        $(".backTop").hide();
    }

})
$('.backTop').on("click", function () {
    $('html,body').animate({ scrollTop: 0 })
})
//顶部的下拉菜单
$(".nav_menu").find(".link-holder").on("mouseenter", function () {
    $(this).parents(".nav_menu").find(".menuaa").slideDown(100)
})
$(".nav_menu").find(".link-holder").on("mouseleave", function () {
    $(this).parents(".nav_menu").find(".menuaa").hide()
})

//滚动
$(window).on("scroll", function () {
    let topH = $(".top_box").height();
    let topH1 = $(".main_c").height() + topH;
    let scrollTop = $(document).scrollTop();
    if (scrollTop > topH) {
        $(".mian-headerbox").css("position", "fixed")
        $(".mian-headerbox").css("top", 0)
    } else {
        $(".mian-headerbox").css("position", "static")
    }
    if (scrollTop > topH1) {
        $(".h3-nav-list").addClass("fixed")
    } else {
        $(".h3-nav-list").removeClass("fixed")
    }


})
$(() => {
    //放大镜
    $(".middleImg").on("mouseenter", function () {
        $(".middleArea").show();
        $('.bigArea').show()
        $(this).on("mousemove", function (e) {
            let mX = e.pageX - $(".middleImg").offset().left - $(".middleArea").width() / 2;
            let mY = e.pageY - $(".middleImg").offset().top - $(".middleArea").height() / 2;
            //活动区域
            if (mX > $(".middleImg").width() - $(".middleArea").width()) {
                mX = $(".middleImg").width() - $(".middleArea").width()
            }
            if (mX < 0) {
                mX = 0;
            }
            if (mY > $(".middleImg").height() - $(".middleArea").height()) {
                mY = $(".middleImg").height() - $(".middleArea").height()
            }
            if (mY < 0) {
                mY = 0
            }

            $(".middleArea").css("left", mX)
            $(".middleArea").css("top", mY)
            //计算倍数
            let z = $(".middleImg").width() / $(".middleArea").width();
            $(".bigImg").css("left", -mX * z);
            $(".bigImg").css("top", -mY * z);
        })
    })
    $(".middleImg").on("mouseleave", function (e) {
        $(".middleArea").hide()
        $('.bigArea').hide()
    })
    $(".smallImg").on("mouseenter", function () {
        let $index = $(this).index() + 1;

        $(this).addClass("bor").siblings().removeClass("bor")
        $(this).parents(".smallImgbox").siblings().find('img').attr('src', './images/放大镜/中图' + $index + '.png')
    })
    //点击添加伪类
    $(".size-item").on("click", function () {
        $(this).addClass('active').siblings().removeClass("active")
    })
    //延迟加载
    $("img").lazyload({ effect:"fadeIn",threshold:-500})
    //购物车
    //数量
    // 减
    if ($('.sub').next().val() == 1) {
        $('.sub').attr("disabled", "off");
        $('.sub').addClass("lit")
    }
    // $(".sub").next().on("input",function(){
    //     if($(this).val()!=1)
    //         $('.sub').attr("disabled");
    // })
    let num = 1;
    $('.sub').next().on("input", function () {
        num = $('.sub').next().val();
        if (num <= 1) {
            num = 1
        }
    })
    $('.sub').on('click', function () {
        if ($('.sub').next().val() <= 1) {
            $(this).addClass("lit")
            $(this).attr("disabled");
        } else {
            $(this).removeClass('lit')
        }
        num--;
        if (num <= 1) {
            num = 1
        }
        $(this).next().val(num)

    })
    //加
    $('.add').on('click', function () {
        if ($(this).prev().val() < 1) {
            $(this).prev().prev().attr("disabled");
            $(this).prev().prev().addClass("lit")
        } else {
            $(this).prev().prev().removeClass('lit')
            $(this).prev().prev().removeAttr("disabled")
        }
        num++;
        $(this).prev().val(num)

    })
    //飞入效果
    $(".jioncart").on('click', function () {
        let a = $(".middleImg>img").clone();
        a.css({ position: 'absolute', width: $(".middleImg>img").width() }).offset($(".middleImg>img").offset()).appendTo($("body"));

        a.animate(Object.assign({ left: $('.cart').offset().left + 10, top: $('.cart').offset().top + 10 }, { width: 0, height: 0, opacity: 0 }), 1000,function(){
            a.remove();
        })
    })
    //点击购物车跳转页面
    $(".cart").on("click",function(){
        location.href="cart.html"; 
    })
    //加入购物车操作
    $(".jioncart").on("click",function(){
        let { u_id: uId } = JSON.parse(localStorage.getItem("user") || '{}');
           let goodsInfo = {}
           let num = $('.mline5').find("input").val();
           let p_id = 1;
           let p_name = `天竺棉优选款`;
           let p_price = `10`;
           let p_total = p_price*num;
           let p_img = `./images/放大镜/小图1.png`;
        //    p_id`,`p_name`,`p_price`,`p_number`,`p_total`,`p_create`,`p_img`,`u_id`
            goodsInfo.u_id = uId;
            goodsInfo.num = num;
            goodsInfo.pid = p_id;
            goodsInfo.pname = p_name;
            goodsInfo.pprice = p_price;
            goodsInfo.ptotal = p_total;
            goodsInfo.index_img = p_img;
            let saveObj = { ...goodsInfo };
            delete (saveObj.p_imgs)
            // console.log(saveObj);
            //通过ajax 把 saveObj 传输到后端
            console.log(saveObj);
            $.ajax({
                type: 'post',
                url: "/api/addCart",
                data: saveObj,
                success(res) {
                console.log(res);
                layer.msg(res.msg)

                }
            })
    })
})